<template>
    <div>
        <div class="commentBox">
            <el-form :model="commentForm"  id="comment-form" >
                <div class="comment-info">
                    <el-form-item >
                        <el-avatar id="comment-avatar" shape="square" ></el-avatar>
                    </el-form-item>

                    <el-form-item class="comment-input">
                        <el-input  v-model="commentForm.author" prefix-icon="el-icon-user" placeholder="(必填)昵称"></el-input>
                    </el-form-item>
                    <el-form-item  class="comment-input">
                        <el-input   v-model="commentForm.mail" prefix-icon="el-icon-connection" placeholder="(必填)邮箱"></el-input>
                    </el-form-item>
                    <el-form-item class="comment-input" >
                        <el-input  v-model="commentForm.url" prefix-icon="el-icon-paperclip" placeholder="(选填)网站"></el-input>
                    </el-form-item>
                </div>
                <el-form-item >
                    <el-input  v-model="commentForm.text" :rows="10" type="textarea" placeholder="来说点什么吧"></el-input>
                </el-form-item>
                <center>
                    <el-button plain @click="submit"><i class="el-icon-s-promotion" ></i> 提交</el-button>
                </center>


            </el-form>
        </div>
    </div>
</template>

<script>
    import { ElMessage } from 'element-plus'
    import {ref,reactive,watch,computed} from 'vue';
    import {addComment} from '@/api/comment'
    import { useStore } from "vuex";

    export default {
        name: "index",
        setup(){
            const commentForm =reactive({
                aid:'',author:'',mail:'',text:'',url:'',type:'0',ownerId:''
            });
            const store = useStore();
            const  aid =computed(()=> store.state.blogdetail.aid);
            function submit() {
                console.log(commentForm);
                commentForm.aid=aid;
                commentForm.ownerId='懒回顾';
                addComment(commentForm).then( res=>{
                    const data=res.data.success;
                    if (data){
                        ElMessage.success({
                            message: '添加评论成功',
                            type: 'success'
                        });

                    }else{
                        ElMessage.error('添加评论失败');
                    }
                })
            }
            return{commentForm,submit}
        }


    }

</script>

<style lang="scss" scoped>
    #comment-form{
       /deep/ textarea{
            background-color: transparent;
            min-height: 200px;
            max-height: 500px;
        }
    }
.comment-info{
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    .comment-input{
        position: relative;
        width: 28%;

        /deep/.el-input__inner{
            background-color: transparent;
        }
    }
}
    #comment-avatar{
        width: 50px;
        height: 50px;
        transition: all 1.5s;
        border-radius: 5px;
        box-shadow: 0 0 8px 1px #ccc;
        margin-top: 20px;
    }
    .submit{
        text-align: center;
        text-decoration: none;
        font: 14px/100%;

    }
</style>